import React, { Component, Fragment } from "react";
import TodoItem from './TodoItem';
import axios from 'axios';
import './style.css';

class TodoList extends Component {
    constructor(props) {
        super(props);
        // state 表示组件的状态
        this.state = {
            // inputValue表示input输入框中的内容
            inputValue: '',
            // list表示存储state的每一项
            list: ['学习react', '学习AWS DVA-C01']
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }
    render() {
        return (
            <Fragment>
                <div>
                    <label htmlFor='insertArea'>todo</label>
                    <input
                        id='insertArea'
                        className='input'
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                    ></input><button
                        onClick={this.handleBtnClick}
                    >提交</button>
                </div>
                <ul>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        );
    }
    componentDidMount() {
        axios.get('/api/todolist')
            .then((res) => {
                this.setState(() => ({ list: [...res.data] }))
            })
            .catch(() => { alert('error') })
    }

    getTodoItem() {
        return (
            this.state.list.map((item, index) => {
                return (
                    <TodoItem key={index} content={item} index={index} deleteItem={this.handleItemDelete}></TodoItem>
                )
            })
        )
    }

    handleInputChange(e) {
        // 当input输入框的值发生变化时，打印出输入框中的值

        // 实际旧版写法：
        // this.setState({
        //     inputValue: e.target.value
        // })

        // console.log(e.target); // 获取这个方法调用的位置的DOM节点
        // 实际新版写法：
        // e.target 可以使用ref传回的参数来替换
        const value = e.target.value
        this.setState(() => ({
            inputValue: value
        }))
        // 设想写法：
        // this.state.inputValue = e.target.value
    }

    handleBtnClick() {
        this.setState((prevState) => ({
            list: [...prevState.list, prevState.inputValue],
            inputValue: ''
        }))
    }

    handleItemDelete(index) {
        // immutable
        // state 不允许做任何的改变
        this.setState((prevState) => {
            const newlist = [...prevState.list];
            newlist.splice(index);
            return {
                list: newlist
            }
        })
    }
}

export default TodoList;